<!-- 卡片>隐患整改 -->
<template>
<div class="hidden-danger-rectification">
  <div class="card-title" @click="$Ctl.enterChild('RectificationDangers',{ orgIds: orgIds })">
    <span class="card-title-text">隐患整改</span>
  </div>
  <div>
    <!-- 流程 -->
    <div class="flow-content">
      <ul class="flow-list">
        <li class="flow-item">
          <p class="flow-name">创建</p>
        </li>
        <li class="flow-item arrow-icon"></li>
        <li class="flow-item">
          <p class="flow-name lin-h-40">指派</p>
          <p class="flow-num color-1 lin-h-40">{{assignNum}}</p>
        </li>
        <li class="flow-item arrow-icon"></li>
        <li class="flow-item">
          <p class="flow-name lin-h-40">整改</p>
          <p class="flow-num color-2 lin-h-40">{{rectificationNum}}</p>
        </li>
        <li class="flow-item arrow-icon"></li>
        <li class="flow-item">
          <p class="flow-name lin-h-40">核实</p>
          <p class="flow-num color-3 lin-h-40">{{verifyNum}}</p>
        </li>
        <li class="flow-item arrow-icon"></li>
        <li class="flow-item">
          <p class="flow-name">完成</p>
        </li>
      </ul>
    </div>
    <!-- 图片 -->
    <div class="img-wrap">
      <el-carousel style="transform: translateZ(0);" v-if="picList.length > 0" :interval="4000" type="card" indicator-position="none" height="120px" @change="carouselChange" ref="imageCarousel">
        <template v-for="(value,index) in picList" >
          <el-carousel-item v-if="index<20" :key="index">
            <el-image :class="index > 0?'blur':''" style="width:100%;height:100%" fit="cover" :src="value.split(',')[0]"></el-image>
          </el-carousel-item>
        </template>
      </el-carousel>
      <!-- <p v-else>暂无图片</p> -->
    </div>
  </div>
</div>
</template>

<script>
import {getHiddenStatusByOrgIds} from "@/api/hiddenDanger"
export default {
  props: {
    orgId: {
      default() {
        return false
      }
    }
  },
  data() {
    return {
      orgIds:this.orgId || this.$store.state.userInfo.organizationIds,
      assignNum:"",//指派
      rectificationNum:"",//整改
      verifyNum:"",//核实
      sendPic:"",//指派图片
      doPic:"",//整改图片
      verifyPic:"",//核实图片
      picList:[],//图片数组
      isMuilUnitUser:this.$store.state.userInfo.isMuilUnitUser//0:单单位用户;1:多单位用户
    }
  },
  created(){
    let that = this;
    that.getData()

    if(!that.isMuilUnitUser || (that.isMuilUnitUser && !that.orgId)){//推送只推一级首页
      window.FunList.hiddenDangerRectification_ws = that.getData
    }
  },
  methods: {
    getData() {
      let that = this;
      getHiddenStatusByOrgIds({
        orgIds: that.orgIds
      }).then(res =>{
        if (res.status === 200) {
          that.assignNum = res.data.sendNum;
          that.rectificationNum = res.data.doNum;
          that.verifyNum = res.data.verifyNum;
          that.sendPic = res.data.sendPic ? res.data.sendPic.split(',') : []
          that.doPic = res.data.doPic ? res.data.doPic.split(',') : []
          that.verifyPic = res.data.verifyPic ? res.data.verifyPic.split(',') : []
          that.picList = [].concat(that.sendPic, that.doPic, that.verifyPic)
        }
      })
    },
    // 幻灯片切换
    carouselChange(currentIndex, oldIndex) {
      let that = this
      let $listWrap = $(that.$refs.imageCarousel.$)

      $(that.$refs.imageCarousel.$children[currentIndex].$el).find('.el-image').removeClass('blur')
      if (oldIndex > -1) {
        $(that.$refs.imageCarousel.$children[oldIndex].$el).find('.el-image').addClass('blur')
      }
    }
  }
}

</script>
<style scoped rel="stylesheet/scss" lang="scss">
.hidden-danger-rectification {
  height: 100%;
  width: 100%;
  .flow-content {
    padding-top: 20px;
    .flow-list {
      display: flex;
      justify-content: space-around;
      list-style: none;
      .flow-item {
        width: 50px;
        height: 80px;
        line-height: 80px;
        text-align: center;
        .flow-name {
          font-size: 18px;
          color: #A3BEDD;
        }
        .flow-num {
          font-size: 24px;
          font-weight: bold;
        }
        .color-1 {
          color: #39B2FF;
        }
        .color-2 {
          color: #E29C4B;
        }
        .color-3 {
          color: #0CBEB4;
        }
        .lin-h-40 {
          line-height: 40px;
        }
      }
      .arrow-icon {
        width: 40px;
        background: url(../../assets/images/cards/arrow-icon.png) center center no-repeat;
      }
    }
  }
  .img-wrap {
    padding-top: 10px;
    width: 99%;
    height: 140px;
    .el-carousel__item:nth-child(2n) {
      background-color: #99a9bf;
    }
    .el-carousel__item:nth-child(2n+1) {
      background-color: #d3dce6;
    }
  }
}
</style>